<template>
    <div class="container bg-gray">
        <div class="form-items fz30">
            <div class="form-item flex border-b">
                <div class="txt333">
                    支付卡类型：
                </div>
                <div class="flex-con txt666">
                    {{bankNames[formData.bankName]||'请选择支付卡类型'}}
                    <select class="full-opacity" v-model="formData.bankName">
                        <option disabled>请选择支付卡类型</option>
                        <option :value="key" v-for="(item,key) in bankNames" :key="key">{{item}}</option>
                    </select>
                </div>
                <img src="../../assets/imgs/other/gt@2x.png" alt="" class="gt"/>
            </div>
            <label class="form-item flex border-b"  for="bankNo">
                <div class="txt333">
                 支付卡号：
                </div>
                <div class="flex-con txt333">
                  <input type="tel" id="bankNo" v-model="formData.bankNo" class="form-input-text" :placeholder="'请输入'+(bankNames[formData.bankName]||'支付卡号')">
                </div>
            </label>
        </div>
       
        <div class="btn-areas">
            <div class="btn-submit" @click="doSubimt">提交</div>
        </div>
         <div class="text-center bankcar-area">
              <img src="../../assets/icons/bank/cxk.png" alt="" v-if="formData.bankName=='03'">
              <img src="../../assets/icons/bank/czk.png" alt="" v-if="formData.bankName=='08'">
        </div>
    </div>
</template>
<script>
import {bankNames} from "../../config/constants";
/**
 *  "05": "银行卡",
  "03": "中油BP畅行卡",
  "08": "中油BP畅行车主卡",
  "06": "其他",
 */
export default {
  data() {
    return {
      bankNames,
      formData: {
        id: 0
      }
    };
  },
  created(){
     let id = this.$route.query.id;
     if(id){
       this.showLoading();
       this.$post('/api/user/bank_card/find',{id}).then(data=>{
         this.formData = data||{};
         this.hideLoading();
       }).catch(_=>{
         this.hideLoading();
       });
     }
  },
  methods: {
    doSubimt() {
      if (this.$assert("isEmpty", this.formData.bankName, "请选择支付卡类型")) {
        return;
      }
      if (this.$assert("isEmpty", this.formData.bankNo, "请输入支付卡卡号")) {
        return;
      }
      this.showLoading();
      let url = "/api/user/addOrEditBankInfo";
      // if (this.formData.id > 0) {
      //   url = "/api/user/bank_card/modify";
      // }
      this.$post(url, this.formData)
        .then(_ => {
          this.$router.go(-1);
          this.hideLoading();
        })
        .catch(_ => {
          this.hideLoading();
        });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../styles/form.scss";
.bankcar-area {
  padding-top: 2rem;
  img {
    width: 8.5rem;
  }
}
</style>
